<template>
	<view class="content">
		<view class="header">
			<!--  手机顶部高度 -->
			<view class="navbar" :style="{height: systemBarHeight + 'px'}">
			</view>

			<view class="title">
				<view class="fh" >
					<image src="/static/index/fh1.png" mode="" @click="fh()"></image>
				</view>
				<view class="tit_tab">
					<view class="tit_tab_item"
						:style="{background:tittabvalue==index?'linear-gradient( 270deg, #F0E1CA 0%, #E2B777 100%)':'',color:tittabvalue==index?'#292221':''}"
						v-for="(item,index) in titTabs" :key="index" @click="tabChange(index)">
						<text>{{item.tit}}</text>
					</view>
				</view>
			</view>
			<view class="tabs">
				<v-tabs v-model="current" color="#ffffff" active-color="#FEDBA4" line-color="#FEE0B2" :line-scale="0.3"
					:tabs="tabs" :scroll=" false" bgColor=' rgba(255,255,255,0)' @change="changeTab"></v-tabs>
			</view>

		</view>
		<!-- 文章 -->
		<view class="list">
			<view class="top" v-if="tittabvalue==0">
				<!-- 1 -->
				<view class="topitem">
					<view class="topitem_lf">
						<view class="topitem_lf_img">
							<image src="/static/logo.png" mode=""></image>
						</view>
						<view class="topitem_lf_img1">
							<image src="/static/index/top1.png" mode=""></image>
						</view>
					</view>

					<view class="topitem_rg">
						<view class="topitem_rg_tit">
							<text>智能化普及风暴，零跑全新机器人时代2月上…</text>
						</view>
						<view class="topitem_rg_browse">
							<text>孙悟空 · 88浏览 · 999评论</text>
						</view>
					</view>
				</view>
				<!-- 2 -->
				<view class="topitem">
					<view class="topitem_lf">
						<view class="topitem_lf_img">
							<image src="/static/logo.png" mode=""></image>
						</view>
						<view class="topitem_lf_img1">
							<image src="/static/index/top2.png" mode=""></image>
						</view>
					</view>

					<view class="topitem_rg">
						<view class="topitem_rg_tit">
							<text>智能化普及风暴，零跑全新机器人时代2月上…</text>
						</view>
						<view class="topitem_rg_browse">
							<text>孙悟空 · 88浏览 · 999评论</text>
						</view>
					</view>
				</view>
				<!-- 3 -->
				<view class="topitem">
					<view class="topitem_lf">
						<view class="topitem_lf_img">
							<image src="/static/logo.png" mode=""></image>
						</view>
						<view class="topitem_lf_img1">
							<image src="/static/index/top3.png" mode=""></image>
						</view>
					</view>

					<view class="topitem_rg">
						<view class="topitem_rg_tit">
							<text>智能化普及风暴，零跑全新机器人时代2月上…</text>
						</view>
						<view class="topitem_rg_browse">
							<text>孙悟空 · 88浏览 · 999评论</text>
						</view>
					</view>
				</view>
				<!-- 4 -->
				<view class="topitem">
					<view class="topitem_lf">
						<view class="topitem_lf_img">
							<image src="/static/logo.png" mode=""></image>
						</view>
						<view class="topitem_lf_img2">
							<image src="/static/index/top4.png" mode=""></image>
						</view>
					</view>

					<view class="topitem_rg">
						<view class="topitem_rg_tit">
							<text>智能化普及风暴，零跑全新机器人时代2月上…</text>
						</view>
						<view class="topitem_rg_browse">
							<text>孙悟空 · 88浏览 · 999评论</text>
						</view>
					</view>
				</view>
				<!-- 5 -->
				<view class="topitem">
					<view class="topitem_lf">
						<view class="topitem_lf_img">
							<image src="/static/logo.png" mode=""></image>
						</view>
						<view class="topitem_lf_img2">
							<image src="/static/index/top5.png" mode=""></image>
						</view>
					</view>

					<view class="topitem_rg">
						<view class="topitem_rg_tit">
							<text>智能化普及风暴，零跑全新机器人时代2月上…</text>
						</view>
						<view class="topitem_rg_browse">
							<text>孙悟空 · 88浏览 · 999评论</text>
						</view>
					</view>
				</view>
				<!-- 6 -->
				<view class="topitem">
					<view class="topitem_lf">
						<view class="topitem_lf_img">
							<image src="/static/logo.png" mode=""></image>
						</view>
						<view class="topitem_lf_img2">
							<image src="/static/index/top6.png" mode=""></image>
						</view>
					</view>

					<view class="topitem_rg">
						<view class="topitem_rg_tit">
							<text>智能化普及风暴，零跑全新机器人时代2月上…</text>
						</view>
						<view class="topitem_rg_browse">
							<text>孙悟空 · 88浏览 · 999评论</text>
						</view>
					</view>
				</view>
				<!-- 7 -->
				<view class="topitem">
					<view class="topitem_lf">
						<view class="topitem_lf_img">
							<image src="/static/logo.png" mode=""></image>
						</view>
						<view class="topitem_lf_img2">
							<image src="/static/index/top7.png" mode=""></image>
						</view>
					</view>

					<view class="topitem_rg">
						<view class="topitem_rg_tit">
							<text>智能化普及风暴，零跑全新机器人时代2月上…</text>
						</view>
						<view class="topitem_rg_browse">
							<text>孙悟空 · 88浏览 · 999评论</text>
						</view>
					</view>
				</view>
			</view>


			<view class="topvideo" v-if="tittabvalue==1">
				<!-- 1 -->
				<view class="topitem">
					<view class="topitem_lf">
						<view class="topitem_lf_img">
							<image src="/static/logo.png" mode=""></image>
						</view>
						<view class="topitem_lf_img1">
							<image src="/static/index/top1.png" mode=""></image>
						</view>
						<view class="topitem_lf_time">
							<text>99:99</text>
						</view>
					</view>

					<view class="topitem_rg">
						<view class="topitem_rg_tit">
							<text>智能化普及风暴，零跑全新机器人时代2月上…</text>
						</view>
						<view class="topitem_rg_browse">
							<text>孙悟空 · 88浏览 · 999评论</text>
						</view>
					</view>
				</view>
				<!-- 2 -->
				<view class="topitem">
					<view class="topitem_lf">
						<view class="topitem_lf_img">
							<image src="/static/logo.png" mode=""></image>
						</view>
						<view class="topitem_lf_img1">
							<image src="/static/index/top2.png" mode=""></image>
						</view>
						<view class="topitem_lf_time">
							<text>99:99</text>
						</view>
					</view>
					<view class="topitem_rg">
						<view class="topitem_rg_tit">
							<text>智能化普及风暴，零跑全新机器人时代2月上…</text>
						</view>
						<view class="topitem_rg_browse">
							<text>孙悟空 · 88浏览 · 999评论</text>
						</view>
					</view>
				</view>

				<!-- 3 -->
				<view class="topitem">
					<view class="topitem_lf">
						<view class="topitem_lf_img">
							<image src="/static/logo.png" mode=""></image>
						</view>
						<view class="topitem_lf_img1">
							<image src="/static/index/top3.png" mode=""></image>
						</view>
						<view class="topitem_lf_time">
							<text>99:99</text>
						</view>
					</view>

					<view class="topitem_rg">
						<view class="topitem_rg_tit">
							<text>智能化普及风暴，零跑全新机器人时代2月上…</text>
						</view>
						<view class="topitem_rg_browse">
							<text>孙悟空 · 88浏览 · 999评论</text>
						</view>
					</view>
				</view>
				<!-- 4 -->
				<view class="topitem">
					<view class="topitem_lf">
						<view class="topitem_lf_img">
							<image src="/static/logo.png" mode=""></image>
						</view>
						<view class="topitem_lf_img2">
							<image src="/static/index/top4.png" mode=""></image>
						</view>
						<view class="topitem_lf_time1">
							<text>99:99</text>
						</view>
					</view>

					<view class="topitem_rg">
						<view class="topitem_rg_tit">
							<text>智能化普及风暴，零跑全新机器人时代2月上…</text>
						</view>
						<view class="topitem_rg_browse">
							<text>孙悟空 · 88浏览 · 999评论</text>
						</view>
					</view>
				</view>
				<!-- 5 -->
				<view class="topitem">
					<view class="topitem_lf">
						<view class="topitem_lf_img">
							<image src="/static/logo.png" mode=""></image>
						</view>
						<view class="topitem_lf_img2">
							<image src="/static/index/top5.png" mode=""></image>
						</view>
						<view class="topitem_lf_time1">
							<text>99:99</text>
						</view>
					</view>

					<view class="topitem_rg">
						<view class="topitem_rg_tit">
							<text>智能化普及风暴，零跑全新机器人时代2月上…</text>
						</view>
						<view class="topitem_rg_browse">
							<text>孙悟空 · 88浏览 · 999评论</text>
						</view>
					</view>
				</view>
				<!-- 6 -->
				<view class="topitem">
					<view class="topitem_lf">
						<view class="topitem_lf_img">
							<image src="/static/logo.png" mode=""></image>
						</view>
						<view class="topitem_lf_img2">
							<image src="/static/index/top6.png" mode=""></image>
						</view>
						<view class="topitem_lf_time1">
							<text>99:99</text>
						</view>
					</view>

					<view class="topitem_rg">
						<view class="topitem_rg_tit">
							<text>智能化普及风暴，零跑全新机器人时代2月上…</text>
						</view>
						<view class="topitem_rg_browse">
							<text>孙悟空 · 88浏览 · 999评论</text>
						</view>
					</view>
				</view>
				<!-- 7 -->
				<view class="topitem">
					<view class="topitem_lf">
						<view class="topitem_lf_img">
							<image src="/static/logo.png" mode=""></image>
						</view>
						<view class="topitem_lf_img2">
							<image src="/static/index/top7.png" mode=""></image>
						</view>
						<view class="topitem_lf_time1">
							<text>99:99</text>
						</view>
					</view>

					<view class="topitem_rg">
						<view class="topitem_rg_tit">
							<text>智能化普及风暴，零跑全新机器人时代2月上…</text>
						</view>
						<view class="topitem_rg_browse">
							<text>孙悟空 · 88浏览 · 999评论</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				systemBarHeight: 0,
				tittabvalue: 0,
				titTabs: [{
						tit: '热门文章'
					},
					{
						tit: '热门视频'
					}
				],
				current: 0,
				tabs: ['周榜', '月榜', '年榜']
			}
		},
		mounted() {
			this.getSysteminfo()
		},
		methods: {
			/* 手机顶部高度 */
			getSysteminfo() {
				uni.getSystemInfo({
					success: res => {
						this.systemBarHeight = res.statusBarHeight;
					}
				});
			},
			fh() {
				uni.navigateBack({
					delta: 1 // 返回的页面层级，1表示返回上一页
				});
			},
			tabChange(index) {
				this.tittabvalue = index
			},
			changeTab(index) {
				console.log('当前选中索引：' + index)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		height: 100%;
		background: #FFFFFF;
	}

	.header {
		background-image: url("");
		background-size: 100% 515.27rpx;
		height: 515.27rpx;
		background-repeat: no-repeat;

	}

	.title {
		display: flex;
		align-items: center;
		padding-right: 76rpx;

		.fh {
			>image {
				width: 61rpx;
				height: 61rpx;
				margin-left: 15rpx;
			}
		}

		.tit_tab {
			margin: auto;
			display: flex;
			width: 332rpx;
			height: 76rpx;
			border-radius: 38rpx 38rpx 38rpx 38rpx;
			border: 2rpx solid #FEE0B1;
			align-items: center;

			.tit_tab_item {
				width: 149rpx;
				height: 57rpx;
				// background: linear-gradient( 270deg, #F0E1CA 0%, #E2B777 100%);
				border-radius: 29rpx 29rpx 29rpx 29rpx;
				margin: auto;
				display: flex;
				justify-content: center;
				align-items: center;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 27rpx;
				color: #FFFFFF;
			}
		}
	}

	.tabs {

		width: 60%;
		margin: 238.55rpx auto 0;
	}

	.list {
		
		margin-top: -19rpx;
	}

	.top {
		
		width: 750rpx;
		padding-top: 40rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 0rpx 0rpx;

		.topitem {
			width: 91%;
			margin: 0 auto 38rpx;
			display: flex;

			.topitem_lf {
				height: 172rpx;

				.topitem_lf_img1 {
					>image {
						width: 57.25rpx;
						height: 80.15rpx;
						position: relative;
						top: -190rpx;
						left: -10rpx;
						z-index: 11;
					}
				}

				.topitem_lf_img2 {
					>image {
						width: 76.34rpx;
						height: 38.17rpx;
						position: relative;
						top: -190rpx;
						left: -10rpx;
						z-index: 11;
					}
				}

				.topitem_lf_time {
					width: 80rpx;
					height: 34rpx;
					background: rgba(0, 0, 0, 0.3);
					border-radius: 4rpx 4rpx 4rpx 4rpx;
				}

				.topitem_lf_img {
					>image {
						width: 229rpx;
						height: 172rpx;
						border-radius: 0rpx 0rpx 0rpx 0rpx;
					}
				}
			}

			.topitem_rg {
				margin-left: 30rpx;

				.topitem_rg_tit {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 31rpx;
					color: #152034;
				}

				.topitem_rg_browse {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 23rpx;
					color: #7D8CA4;
					margin-top: 30rpx;
				}
			}
		}
	}

	.topvideo {
		
		width: 750rpx;
		padding-top: 40rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 0rpx 0rpx;

		.topitem {
			width: 91%;
			margin: 0 auto 38rpx;
			display: flex;
			height: 172rpx;

			.topitem_lf {
				height: 172rpx;
				width: 229rpx;

				.topitem_lf_img1 {
					>image {
						width: 57.25rpx;
						height: 80.15rpx;
						position: relative;
						top: -190rpx;
						left: -10rpx;
						z-index: 11;
					}
				}

				.topitem_lf_img2 {
					>image {
						width: 76.34rpx;
						height: 38.17rpx;
						position: relative;
						top: -190rpx;
						left: -10rpx;
						z-index: 11;
					}
				}

				.topitem_lf_time {
					width: 80rpx;
					height: 34rpx;
					background: rgba(0, 0, 0, 0.3);
					border-radius: 4rpx 4rpx 4rpx 4rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 23rpx;
					color: #FFFFFF;
					position: relative;
					top: -140rpx;
					right: -140rpx;
					display: flex;
					justify-content: center;
					align-items: center;
				}

				.topitem_lf_time1 {
					width: 80rpx;
					height: 34rpx;
					background: rgba(0, 0, 0, 0.3);
					border-radius: 4rpx 4rpx 4rpx 4rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 23rpx;
					color: #FFFFFF;
					position: relative;
					top: -97rpx;
					right: -140rpx;
					display: flex;
					justify-content: center;
					align-items: center;
				}

				.topitem_lf_img {
					>image {
						width: 229rpx;
						height: 172rpx;
						border-radius: 0rpx 0rpx 0rpx 0rpx;
					}
				}
			}

			.topitem_rg {
				margin-left: 30rpx;

				.topitem_rg_tit {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 31rpx;
					color: #152034;
				}

				.topitem_rg_browse {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 23rpx;
					color: #7D8CA4;
					margin-top: 30rpx;
				}
			}
		}
	}
</style>